<template>
  <div class="flex flex-row justify-around">
    <div class="basis-4/6 flex flex-row">
      <span class="basis-1/6">{{ refProps.name }}</span>
      <span v-if="refProps.pid" class="basis-1/6">{{ refProps.pid }}</span>
      <span v-else class="basis-1/6">项目暂未启动</span>
      <span class="basis-1/2">{{ refProps.file }}</span>
      <span class="basis-1/6">{{ refProps.fileSize }}</span>
    </div>
    <div class="basis-1/6 flex justify-center">
      <el-button v-if="!refProps.pid" type="primary" :icon="VideoPlay" @click="startJar"/>
      <el-button v-else type="primary" :icon="VideoPause" @click="stopJar"/>
      <el-button type="primary" :icon="Delete" @click="delJar"/>
      <el-button type="primary" :icon="Document" @click="showLog"/>
    </div>
  </div>
</template>

<script setup>
import {Delete, Document, VideoPause, VideoPlay} from "@element-plus/icons-vue";
import {reactive} from 'vue'
import {delJarFile, execute, fetchLog, killJar} from "@/api/api.js";
import {ElMessage, ElMessageBox} from 'element-plus'

const emits = defineEmits(["onStatusChanged"]);

const props = defineProps({
  name: String,
  pid: Number,
  file: String,
  fileSize: String
});

const refProps = reactive(props)

const startJar = () => {
  ElMessageBox.prompt('输入额外启动参数', '启动项目', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(({value}) => {
    execute(props.name, value?.split("=")).then(data => {
      ElMessage({
        type: 'success',
        message: `项目启动成功, pid ${data}`,
      })
      emits('onStatusChanged')
    })
  }).catch((e) => {
    console.log(e)
  })
}
const stopJar = () => {
  ElMessage.info('正在停止 ' + props.name)
  killJar(props.name).then(_ => {
    setTimeout(() => emits('onStatusChanged'), 2000)
  })
}
const delJar = () => {
  delJarFile(props.name).then(_ => {
    emits('onStatusChanged')
  })
}
const showLog = () => {
  fetchLog(props.name).then(data => {
    console.log(data)
  })
}

</script>